mattsresourcesfandomcom-20200216-history
Web Development
Coding and web design: best practices, resources. Covers HTML, CSS, WordPress, quality/integrity testing tools and more. "Old, stale site design scares people off. So do sites that load slowly. And sites that are cluttered with irrelevant ads. And sites that don’t work properly on mobile devices." ''- Sonia Simone on Copyblogger, Apr 5, 2015.'' Developer Tools Code Generation/Repair * Prefixing CSS for compatibility: http://pleeease.io/play/ * Remembering what to prefix: http://shouldiprefix.com * Generating compatible CSS3: http://css3generator.com/ * CSS centering code generator: http://howtocenterincss.com/ * Pattern designer/generator: http://www.patternify.com/ * CSS3 gradient generator: http://www.colorzilla.com/gradient-editor/ Testing/Validation Tools * W3 Validator to check code integrity! * Check responsive display (Studiopress service) * Google's Mobile Friendly Test * Facebook's Debugger to see how content displays when shared * KnowEm Social Media Optimizer to test for various social media! Resources * Migrate a site from a multisite network * Multisite domain mapping tutorial (from 2012, but kept up to date (as of Nov 2015)) * Essential font/css toolkit: FontAwesome (implementation) * How to set up a multilingual / multi-language WordPress site * Article: Introduction to responsive web design * Article: Adaptive vs. Responsive Design * Free eBook: Creativity and Consistency in UI Design * Free eBook: How to code in HTML5 and CSS3 * Great CSS3 flex cheat sheet * Reference for CSS selectors / how to combine them! Layout Creation * Free icon database: flaticon * 50 free social media icon sets * Powerful open-source web site development toolkit: Layers! * Annarita Tranfici's guide to responsive web design (Jan-Mar, 2013) * Highly popular design trend (spring 2014): Parallax themes * Article about full-page background images (aka full-screen) * Full-screen background fix for iOS (iPhone, iPad) (also here) * How to add WP widgets anywhere WordPress Plugins * Multi-language (multilingual): Polylang * Security: Wordfence Security * Highly customizable [https://wordpress.org/plugins/wp-topbar/ topbar]! * Slide-out sidebar: free | paid * Collapsible content: Collapse-O-Matic (free) | Expand + Collapse Funk * Google Fonts plugin: allows to use any font featured by Google on your page! * Create your own, personalized short URLs: Pretty Link plugin * Backups: Vaultpress (paid) | WordPress Backup to Dropbox * Social Media Integration: AddThis Sharing Buttons * Marketing: AddThis Welcome Bar * SEO: All In One SEO Pack | SEO by Yoast * Disable automatic ' insertion: Toggle wpautop ** Alternately: LCT Temporary wpautop Disable Shortcode (Shortcode to use in source text: ''raw) * '''Tags and categories for pages: Post Tags and Categories for Pages * Responsive Menu: Responsive Menu by Peter Featherstone * Pull quotes: Simple Pull Quote (although simply using and styling is probably better) * Table of Contents: Table of Content * Contact Form: Contact Form 7 * Social media integration: Social Media Feather * HTML Editor Syntax Highlighter * Compress images while uploading: WP Smush * Add CSS anywhere: SiteOrigin CSS * Highly featured tables: TablePress Image/Content Sliders * Highly featured CSS3 image/content slider (18 Dollars, looks amazing) * Possibly full-screen: Slider WD | HUGE-IT Slider * Definitely full-screen: Simple Slider * Very popular: Meta Slider * Easy Media Gallery Pro - beautiful & fast for galleries & more (recommended by Social Media Examiner) * Free: parallax slider | another one | responsive image slider | Cyclone Slider 2 Untested * Per Page add to Head: add any code to head sections * Contact form generator (+link to img/txt slider) Inspiring Websites * Design inspiration: Awwwards | Abduzeedo * Large collection of web site templates: www.hitectemplates.com * Parallax pages: dustn | redline | FSBOicity | Les Productions Wild Box * More inspiring web pages: Numix | Couchsurfing | Mark Manson | Gary Vaynerchuk | Policymic * Using photography to great effect: Kimberly and the Dreamtime | Radeberger | DB Karriere * Great use of overlay image: Paquin Entertainment * Nice tiled layout: http://www.northbounddesign.com/ * Additional Brilliant Homepage Examples * Blog with full-size cover image * Pure CSS hover menus: www.prowebdesign.ro Working with WP Themes * Anatomy of a WP theme (Nov 18, 2013) * Creating a theme from scratch (tutorial, 2014) Atahualpa * Making Atahualpa responsive: Discussion | Best Solution * Install several copies: http://forum.bytesforall.com/showthread.php?t=22665 (aka multi-install) * Slideshow under header: http://forum.bytesforall.com/showthread.php?t=15939 * Page Menu alignment: http://forum.bytesforall.com/showthread.php?t=9094 | http://forum.bytesforall.com/showthread.php?t=16060 * Widget Area in Header: http://forum.bytesforall.com/showthread.php?t=17159 * Fluid/adaptable width for header image: http://forum.bytesforall.com/showthread.php?t=7296 Montezuma * Beginner's: http://forum.bytesforall.com/showthread.php?t=19450 IE Compatibility Solutions * PIE (Progressive Internet Explorer) ** StackOverflow re. opaque bg ** StackOverflow re. PIE ** PIE Website ** Include behavior: url(PIE.htc); CSS/Coding Solutions * CSS3 :target tutorial including an awesome gallery! (z-index trick) * Awesome things to do with pseudo elements! (:before, :after) * Stripes in CSS (incl. image overlays): https://css-tricks.com/stripes-css/ * Cycling (rotating) background images: discussion on stackoverflow * Flexbox guide ** https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties ** For old browsers: https://css-tricks.com/using-flexbox/ * Vertically centered horizontal lines before/after element ** http://www.santaclaradesign.com/ ** Examples at StackOverflow ** How to do it: SOLUTION! Animations * Awwwards article for basics/introduction * Button hovering: hover.css * Great collection: animate.css CSS Properties * box-sizing property to control how padding/margin affects box size Fiddles * Experimenting with hover popups (:hover, :target)